<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex自动伸缩布局</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f0f0f0;
        }
        
        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        
        .flex-item {
            background-color: #007bff;
            color: white;
            padding: 10px 15px;
            border-radius: 5px;
            font-size: 14px;
            font-weight: bold;
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.3s ease;
            user-select: none;
        }
        
        .flex-item:hover {
            background-color: #0056b3;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        
        .controls {
            margin-bottom: 20px;
            text-align: center;
        }
        
        .controls button {
            margin: 0 10px;
            padding: 10px 20px;
            font-size: 16px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .controls button:hover {
            background-color: #218838;
        }
        
        .add-item {
            margin-bottom: 20px;
            text-align: center;
        }
        
        .add-item input {
            padding: 8px 12px;
            font-size: 14px;
            border: 2px solid #ccc;
            border-radius: 5px;
            margin-right: 10px;
            width: 200px;
        }
        
        .add-item button {
            padding: 8px 16px;
            font-size: 14px;
            background-color: #ffc107;
            color: #333;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .add-item button:hover {
            background-color: #e0a800;
        }
        
        .container-info {
            text-align: center;
            margin-top: 20px;
            padding: 15px;
            background-color: #e9ecef;
            border-radius: 5px;
            font-size: 14px;
            color: #495057;
        }
        
        .flex-direction-controls {
            margin-bottom: 20px;
            text-align: center;
        }
        
        .flex-direction-controls button {
            margin: 0 5px;
            padding: 8px 12px;
            font-size: 14px;
            background-color: #6c757d;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .flex-direction-controls button.active {
            background-color: #495057;
        }
        
        .flex-direction-controls button:hover {
            background-color: #5a6268;
        }
    </style>
</head>
<body>
    <div class="flex-direction-controls">
        <button onclick="setFlexDirection('row')" class="active">水平排列</button>
        <button onclick="setFlexDirection('column')">垂直排列</button>
        <button onclick="setFlexDirection('row-reverse')">水平反向</button>
        <button onclick="setFlexDirection('column-reverse')">垂直反向</button>
    </div>
    
    <div class="add-item">
        <input type="text" id="newItemInput" placeholder="输入新元素内容..." onkeypress="handleKeyPress(event)">
        <button onclick="addItem()">添加元素</button>
    </div>
    
    <div class="controls">
        <button onclick="clearAll()">清空所有</button>
        <button onclick="addRandomItems()">添加随机元素</button>
        <button onclick="toggleWrap()">切换换行</button>
    </div>
    
    <div class="container" id="flexContainer">
        <div class="flex-item">短文本</div>
        <div class="flex-item">中等长度的文本</div>
        <div class="flex-item">这是一个比较长的文本内容</div>
        <div class="flex-item">非常长的文本内容用来测试自动伸缩效果</div>
        <div class="flex-item">按钮</div>
        <div class="flex-item">链接</div>
        <div class="flex-item">标签</div>
        <div class="flex-item">菜单项</div>
    </div>
    
    <div class="container-info" id="containerInfo">
        容器信息：水平排列，8个元素，自动换行
    </div>

    <script>
        let isWrapped = true;
        
        function setFlexDirection(direction) {
            const container = document.getElementById('flexContainer');
            container.style.flexDirection = direction;
            
            // 更新按钮状态
            document.querySelectorAll('.flex-direction-controls button').forEach(btn => {
                btn.classList.remove('active');
            });
            event.target.classList.add('active');
            
            updateContainerInfo();
        }
        
        function addItem() {
            const input = document.getElementById('newItemInput');
            const text = input.value.trim();
            
            if (text) {
                const container = document.getElementById('flexContainer');
                const newItem = document.createElement('div');
                newItem.className = 'flex-item';
                newItem.textContent = text;
                newItem.onclick = function() {
                    this.remove();
                    updateContainerInfo();
                };
                
                container.appendChild(newItem);
                input.value = '';
                updateContainerInfo();
            }
        }
        
        function handleKeyPress(event) {
            if (event.key === 'Enter') {
                addItem();
            }
        }
        
        function clearAll() {
            const container = document.getElementById('flexContainer');
            container.innerHTML = '';
            updateContainerInfo();
        }
        
        function addRandomItems() {
            const randomTexts = [
                '随机文本1', '随机文本2', '随机文本3', '随机文本4', '随机文本5',
                '这是一个随机生成的较长文本', '短文本', '中等长度随机文本',
                '按钮', '标签', '菜单', '选项', '项目', '元素'
            ];
            
            for (let i = 0; i < 5; i++) {
                const randomText = randomTexts[Math.floor(Math.random() * randomTexts.length)];
                const container = document.getElementById('flexContainer');
                const newItem = document.createElement('div');
                newItem.className = 'flex-item';
                newItem.textContent = randomText;
                newItem.onclick = function() {
                    this.remove();
                    updateContainerInfo();
                };
                
                container.appendChild(newItem);
            }
            
            updateContainerInfo();
        }
        
        function toggleWrap() {
            const container = document.getElementById('flexContainer');
            isWrapped = !isWrapped;
            container.style.flexWrap = isWrapped ? 'wrap' : 'nowrap';
            updateContainerInfo();
        }
        
        function updateContainerInfo() {
            const container = document.getElementById('flexContainer');
            const items = container.children.length;
            const direction = container.style.flexDirection || 'row';
            const wrap = container.style.flexWrap || 'wrap';
            
            const directionText = {
                'row': '水平排列',
                'column': '垂直排列',
                'row-reverse': '水平反向',
                'column-reverse': '垂直反向'
            }[direction] || '水平排列';
            
            const wrapText = wrap === 'wrap' ? '自动换行' : '不换行';
            
            document.getElementById('containerInfo').textContent = 
                `容器信息：${directionText}，${items}个元素，${wrapText}`;
        }
        
        // 为现有元素添加点击删除功能
        document.addEventListener('DOMContentLoaded', function() {
            const items = document.querySelectorAll('.flex-item');
            items.forEach(item => {
                item.onclick = function() {
                    this.remove();
                    updateContainerInfo();
                };
            });
            
            updateContainerInfo();
        });
    </script>
</body>
</html> 